<template>
  <div id="container"></div>
</template>
<script>
import AMapLoader from "@amap/amap-jsapi-loader";
import {maplist} from '@/api/devicebysite'

const maps = [];

const getConfig = async () => {
  const data = await maplist()
  console.log(data)
  Object.assign(maps, data)
}

export default {
  name: "map-view",
  mounted() {
    this.initAMap();
  },
  unmounted() {
    this.map?.destroy();
  },
  methods: {
    async initAMap() {
      await this.getConfig(); // 加载数据
      window._AMapSecurityConfig = {
        securityJsCode: '7351dd8587325c2dbad73d1e7a202af9',
      }
      await AMapLoader.load({
        key: "cf328a9a3a4138aab25fc8134557567b", // 申请好的Web端开发者Key，首次调用 load 时必填
        version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
      });
      const AMap = window.AMap;
      const container = document.getElementById("container");
      this.map = new AMap.Map(container, {
        viewMode: "2D",
        zoom: 15,
        center: [120.757635, 30.810814],
      });

      this.addMarkers();
    },
    async getConfig() {
      const data = await maplist();
      console.log(data);
      this.maps = data;
    },
    addMarkers() {
      this.maps.forEach(point => {
        point.sun = (point.peakElectricity + point.ebbElectricity);
        let icon = new AMap.Icon({
          size: new AMap.Size(35, 53),
          image: '/mp/images/' + point.deviceState + '.png',
          imageOffset: new AMap.Pixel(0, 0),
          imageSize: new AMap.Size(35, 53)
        });
        let marker = new AMap.Marker({
          position: new AMap.LngLat(point.longitude, point.latitude),
          title: point.deviceId,
          map: this.map,
          icon: icon
        });
        marker.on('click', () => {
          this.showDeviceInfo(point);
        });
      });
    },
    //弹窗
    showDeviceInfo(point) {
      if (point.deviceState == 1) {
        point.deviceStateimg = '<img src=/mp/images/online.png>';
        // point.deviceState='<img src=./images/online.png>';
        point.deviceStateName = '在线'
      } else if (point.deviceState == 0){
        // point.deviceState='<img src=/mp/images/offline.png>';
        point.deviceStateimg = '<img src=/mp/images/offline.png>';
        point.deviceStateName = '离线'
      }else {
        point.deviceStateimg = '<img src=/mp/images/offline.png>';
        point.deviceStateName = '故障'
      }
      if (point.remoteState == 1) {
        // point.remoteState='<img src=/mp/images/automatic.png>';
        point.remoteStateimg = '<img src=/mp/images/automatic.png>';
        point.remoteStateName = '自动'
      } else if (point.remoteState == 0) {
        // point.remoteState='<img src=/mp/images/manual.png>';
        point.remoteStateimg = '<img src=/mp/images/manual.png>';
        point.remoteStateName = '手动'
      } else {
        point.remoteStateimg = ''
        point.remoteStateName = '柜门点动'
      }
      if (point.mudState == 1) {
        point.mudStateName = '运行';
      } else if (point.mudState == 0) {
        point.mudStateName = '停止';
      } else {
        point.mudStateName = '异常';
      }
      if (point.sewageState == 1) {
        point.sewageStateName = '运行';
      } else if (point.sewageState == 0) {
        point.sewageStateName = '停止';
      } else {
        point.sewageStateName = '异常';
      }
      if (point.runningTime == null) {
        point.runningTime = ""
      }
      if (point.liqu == null) {
        point.liqu = 0
      }
      if (point.peakElectricity == null) {
        point.peakElectricity = 0
      }
      if (point.ebbElectricity == null) {
        point.ebbElectricity = 0
      }
      // 弹窗显示设备信息
      let infoWindow = new AMap.InfoWindow({
        content: `<div class="map">
	                   <div>
	                   <b >${point.siteName}</b>
	                   <p class="deviceState">设备状态：${point.deviceStateimg}  <span class="deviceStateName">${point.deviceStateName}</span></p>
	                   <p class="remoteState">远程手/自动状态：${point.remoteStateimg}  <span class="remoteStateName">${point.remoteStateName}</span></p>
	                   <p >安装时间：      ${point.createTime}</p>
	                   <p >站点负责人：     ${point.nickName}${point.mobile}</p>
	                   <p >潜污泵开启次数：     ${point.count}次</p>
	                   <p >设备累计运行时间：      ${point.runningTime}小时</p>
	                   </div>
	                   <div class="tanchuang">
	                   <b >设备状态：</b>
	                   <p >潜污泵：<span class="keepRight">${point.sewageStateName}</span></p>
	                   <p >泥浆泵：<span class="keepRight">${point.mudStateName}</span></p>
	                   <p >瞬时液位：<span class="keepRight">${point.liqu}mm</span></p>
	                   <p >累计总用电数：<span class="keepRight">${point.totalElectricityConsumption} 度</span></p>
	                   <p >累计峰用电数：<span class="keepRight">${point.peakElectricity} 度</span></p>
	                   <p >累计谷用电数：<span class="keepRight">${point.ebbElectricity} 度</span></p>
	                   </div>
	              </div>`,
        offset: new AMap.Pixel(0, -30)
      });
      // 显示弹窗
      infoWindow.open(this.map, new AMap.LngLat(point.longitude, point.latitude));
    },
  },
};
</script>

<style scoped>
#container {
  width: 100%;
  height: 800px;
}
</style>

<style>
.map {
  width: 400px;
  height: 500px;
}

p {
  margin-top: 10px;
  white-space: pre;
}

b {
  font-size: 20px
}

.tanchuang {
  margin-top: 40px
}
</style>

<style scoped>
#container {
  width: 100%;
  height: 800px;
}
</style>

<style>
.map {
  width: 350px;
  height: 470px;
}

p {
  margin-top: 10px;
  white-space: pre;
}

deviceState {
  margin-top: 10px;
  white-space: pre;
  display: inline-block;
}

img {
  display: inline-block;
}

b {
  font-size: 20px
}

.tanchuang {
  margin-top: 40px
}

.deviceStateName {
  color: #2b85e4;
}

.remoteStateName {
  color: #2b85e4;
}

.keepRight {
  float: right;
}
</style>